@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body,.web{
    width: 100%;
    height: 100%;
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.page{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 50px;
}
.page1{
    background:#e7e7e7;
}
.daren{
    animation: ybz;
}
.page2{
    background:green;
}
.page3{
    background:orangered;
}
.daren{
//  transition: 3s;
//  animation: ybz 3s infinite;
}

@keyframes ybz{
    0%{
        transform: translateY(-100%);
    }
    20%{
        transform: translateY(0);
        }
    40%{
        transform: rotate(-15deg);
        }
    60%{
        transform: rotate(-5deg);
        }      
    80%{
        transform: rotate(-15deg);
        }
    100%{
        transform: rotate(-5deg);
        }    
    
}
.xie{
    animation: xie 1s ease 1;
}
@keyframes xie{
    0%{transform: rotate(-45deg);}
    100%{transform: rotate(0);}
}
